import { Form, Input, Button, message } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { FC } from 'react'
import { useAppDispatch } from '../app/hooks'
import { signIn } from '../features/user/slice'
import styles from './LoginForm.module.css'
import { FormProps } from '../type'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 19 },
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 24,
      offset: 0,
    },
  },
}

const LoginForm: FC<FormProps> = props => {
  const dispatch = useAppDispatch()

  const onFinish = (values: UserInfo) => {
    if (props.ackProtocol) {
      message.success('登录成功')
      dispatch(signIn(values))
    } else {
      message.error('请先阅读协议')
    }
  }

  return (
    <Form {...props} name="basic" {...formItemLayout} onFinish={onFinish}>
      <div>
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your username/E-mail!',
            },
          ]}
        >
          <Input
            placeholder="请输入用户名"
            suffix={<UserOutlined className={styles.userIcon} />}
          />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input.Password placeholder="请输入密码" />
        </Form.Item>
        <div
          className={styles.toRegister}
          onClick={props.handleChangeToggleBtn}
        >
          <span>立即注册</span>
        </div>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit" className={styles.button}>
            登入
          </Button>
        </Form.Item>
      </div>
    </Form>
  )
}

export default LoginForm
